﻿@{
    ViewBag.Title = "Form";
    Layout = "~/Views/Shared/_Form.cshtml";
}
<link href="~/Content/scripts/plugins/simditor/css/simditor.css" rel="stylesheet" />
<script src="~/Content/scripts/plugins/simditor/js/module.min.js"></script>
<script src="~/Content/scripts/plugins/simditor/js/uploader.min.js"></script>
<script src="~/Content/scripts/plugins/simditor/js/hotkeys.min.js"></script>
<script src="~/Content/scripts/plugins/simditor/js/simditor.min.js"></script>
<link href="~/Content/scripts/plugins/cxColor/css/jquery.cxcolor.css" rel="stylesheet" />
<script src="~/Content/scripts/plugins/cxColor/js/jquery.cxcolor.js"></script>
<script>
    $(function () {
        InitControl();
    })
    function InitControl()
    {
        $.SetForm({
            url: "../../ResourceManage/PStructColor/GerColorList",
            success: function (data) {
                for (var i = 0; i < data.length; i++) {
                    $("#" + data[i].Id).css("backgroundColor", data[i].Color);
                    $("." + data[i].Id).val(data[i].Color);
                }
            }
        })
    }
    //选择颜色-设置标题色彩
    function SelectColorEvent(s) { 
        var mycolor = $("#select_color"+s).cxColor();
        mycolor.show(); 
        $("#select_color"+s).bind("change", function () { 
            $(".cs_" + s).css("backgroundColor", this.value); 
            $("#Color_" + s).val(this.value); 
        });
    }
    //保存表单
    function AcceptClick() {
        
        var queryJson = {
            Color0: $("#Color_0").val(),
            Color1: $("#Color_1").val(),
            Color2: $("#Color_2").val(),
            Color3: $("#Color_3").val(),
            Color4: $("#Color_4").val(),
            Color5: $("#Color_5").val(),
            Color6: $("#Color_6").val(),
            Color7: $("#Color_7").val()
            };
        $.SaveForm({
            url: "../../ResourceManage/PStructColor/SaveColor?queryJson=" +encodeURIComponent(JSON.stringify(queryJson)),
            loading: "正在保存数据...",
            success: function () { 
             
            }
        });
    }
</script>
<style>
    .form {
        text-align: center;
    }

        .form tr {
            height: 40px;
            line-height: 40px;
        }

    .cs1 {
        background-color: #ccc;
        width: 100px;
        height: 30px;
        margin: 5px auto;
        cursor: pointer;
    }
    .cs1:hover {
        border: none;
        -webkit-box-shadow: 0 1px 40px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.06) inset;
        position: relative;
        *zoom: 1;
    }
    #Color {
        position: relative;
        visibility: hidden;
    }
</style>
<div id="Color" hidden>
    <span id="select_color0" class="input-button" style="width: 18px;float:left; height: auto;" title="颜色配置"><img src="~/Content/images/large_tiles.png" /></span>
    <span id="select_color1" class="input-button" style="width: 18px;float:left; height: auto;" title="颜色配置"><img src="~/Content/images/large_tiles.png" /></span>
    <span id="select_color2" class="input-button" style="width: 18px;float:left; height: auto;" title="颜色配置"><img src="~/Content/images/large_tiles.png" /></span>
    <span id="select_color3" class="input-button" style="width: 18px;float:left; height: auto;" title="颜色配置"><img src="~/Content/images/large_tiles.png" /></span>
    <span id="select_color4" class="input-button" style="width: 18px;float:left; height: auto;" title="颜色配置"><img src="~/Content/images/large_tiles.png" /></span>
    <span id="select_color5" class="input-button" style="width: 18px;float:left; height: auto;" title="颜色配置"><img src="~/Content/images/large_tiles.png" /></span>
    <span id="select_color6" class="input-button" style="width: 18px;float:left; height: auto;" title="颜色配置"><img src="~/Content/images/large_tiles.png" /></span>
    <span id="select_color7" class="input-button" style="width: 18px;float:left; height: auto;" title="颜色配置"><img src="~/Content/images/large_tiles.png" /></span> 
</div>
<table class="form" style="width:80%; margin:10px  auto">
    <tr style="border-bottom:1px solid #ccc;">
        <td>状态</td>
        <td>状态值</td>
        <td>颜色</td>
    </tr>

    <tr>
        <td>准备房</td>
        <td>0</td>
        <td><div class="cs1 cs_0" id="Color0" onclick="SelectColorEvent(0)"></div></td>
        <td id="Color_0" class="Color0" hidden></td>
    </tr>
    <tr>
        <td>待租</td>
        <td>1</td>
        <td><div class="cs1 cs_1" id="Color1" onclick="SelectColorEvent(1)"></div></td>
        <td id="Color_1" class="Color1" hidden></td>
    </tr>
    <tr>
        <td>已选取</td>
        <td>2</td>
        <td><div class="cs1 cs_2" id="Color2" onclick="SelectColorEvent(2)"></div></td>
        <td id="Color_2" class="Color2" hidden></td>
    </tr>
    <tr>
        <td>已租</td>
        <td>3</td>
        <td><div class="cs1 cs_3" id="Color3" onclick="SelectColorEvent(3)"></div></td>
        <td id="Color_3" class="Color3" hidden></td>
    </tr>
    <tr hidden>
        <td>自用</td>
        <td>4</td>
        <td><div class="cs1 cs_4" id="Color4" onclick="SelectColorEvent(4)"></div></td>
        <td id="Color_4" class="Color4" hidden></td>
    </tr>
    <tr hidden>
        <td>已售</td>
        <td>5</td>
        <td><div class="cs1 cs_5" id="Color5" onclick="SelectColorEvent(5)"></div></td>
        <td id="Color_5" class="Color5" hidden></td>
    </tr>
    <tr>
        <td>续租中</td>
        <td>6</td>
        <td><div class="cs1 cs_6" id="Color6" onclick="SelectColorEvent(6)"></div></td>
        <td id="Color_6" class="Color6" hidden></td>
    </tr>
    <tr>
        <td>维修中</td>
        <td>7</td>
        <td><div class="cs1 cs_7" id="Color7" onclick="SelectColorEvent(7)"></div></td>
        <td id="Color_7" class="Color7" hidden></td>
    </tr>
</table>
